<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://wwww.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="../aaa/css/font.css">
<link rel="stylesheet" href="../aaa/css/xadmin.css">
<script src="../aaa/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../aaa/js/xadmin.js"></script>
<script src="../aaa/js/jquery-3.1.1.js"></script>
</head>
<script>
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
</script>
<body>
<!--id：<input type="text" id="inp1" /><br>-->

<div class="layui-row">

<div class="layui-form-item">
<br>
    <label  class="layui-form-label">
        <span class="x-red">*</span>名字：
    </label>
        <div class="layui-input-inline">
            <input type="text" id="inp2" required="" lay-verify="required"
                   autocomplete="off" class="layui-input" />
        </div>
            <div class="layui-input-inline layui-form" >
                <label class="layui-form-label">性别： </label>
                <div class="layui-input-block" style="width: 180px">
                    <select id="inp3" class="form-control">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
    </div>
    <div class="layui-form-item">
        <br>
        <label  class="layui-form-label">
            <span class="x-red">*</span>电话：
        </label>
        <div class="layui-input-inline">
            <input type="text" id="inp4" required="" lay-verify="required"
                   autocomplete="off" class="layui-input" />
        </div>

        <div class="layui-input-inline">
            <label  class="layui-form-label">
                <span class="x-red">*</span>部门：
            </label>
            <div class="layui-input-block layui-form" style="width: 180px">
            <select  name="dept_id" class="form-control " id="inp5">
                <option value="0">请选择</option>
                <option th:each="dept:${dept}"
                        th:value="${dept.dept_id}"
                        th:text="${dept.dept_name}"></option>
            </select>
            </div>
    </div>
    </div>
<button  class="layui-btn" lay-filter="add" value="添加一行" onclick="addNode()">添加</button>


</div>

<table cellpadding="0" cellspacing="0" border="0" id="data1" class="layui-table layui-form">
    <tbody id="tbody">
    <thead>
        <th>性别</th>
        <th>姓名</th>
        <th>电话</th>
        <th>部门</th>
        <th>操作</th>
    </thead>
    <tbody>
</table>
<br/><br/>

<button class="layui-btn"  onclick="f()">提交</button>
</body>
<script src="../aaa/js/jquery-3.1.1.js"></script>

<script>
    layui.use(['form', 'layer','jquery'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
        });


    //批量添加
    function f() {
        // var  a = $("#sd").serializeArray();
        var data = Array();
        var data1 = Array();
        var data2 = Array();
        var emplist = Array();
        $("span[name='emp_name']").each(function(){
                data.push($(this).text())
            });
        $("span[name='emp_sex']").each(function(){
            data1.push($(this).text())
        });
        $("span[name='emp_phone']").each(function(){
            data2.push($(this).text())
        });
        var i = 0;
        $("span[name='dept_id']").each(function() {
                emplist.push({
                    emp_name: data[i],
                    emp_sex: data1[i],
                    emp_phone: data2[i],
                    dept_id: $(this).text()
                });
                i++

            }
        );

        $.ajax({
            type: "post",
            url: "/emp/addpiliang",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(emplist),
            success: function () {

            }

        });

        layer.msg("添加成功",{
            icon: 6,
            time:500
        },function() {
            parent.window.location.reload();//重新页面
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
        });
    }

    function addNode(){
            //var inp1 = $("#inp1").val();
            var inp2 = $("#inp2").val();
            var inp3 = $("#inp3").val();
            var inp4 = $("#inp4").val();
            var inp5 = $("#inp5").val();

       if(inp2 == "" || inp3 == ""|| inp4 == "" || inp5 == ""){
             alert("文本框不能为空")
       }else{
           var tr = "<tr>";
           // tr = tr+"<td><span name='emp_id'>"+inp1+"</span></td>";
           tr = tr+"<td><span name='emp_name'>"+inp2+"</span></td>";
           tr = tr+"<td><span name='emp_sex'>"+inp3+"</span></td>";
           tr = tr+"<td><span name='emp_phone'>"+inp4+"</span></td>";
           tr = tr+"<td><span name='dept_id'>"+inp5+"</span></td>";
           tr = tr+"<td><button onclick='deleteNode(this)'>删除</button></td>";
           tr = tr+"</tr>";
           $("#tbody").append(tr);
       }



    }
    function deleteNode(){
        $("tr:last").remove();
    }
    function deleteNode(obj){
        $(obj).parent().parent().remove();
    }

    function add(obj){
        var num = $(obj).prev().html();//紧挨着的上一个标签
        num++;
        if(num>0){
            $(".reduce").removeProp("disabled");
        }
        var price =Number($(obj).parent().parent().children().eq(2).html())*Number(num)+Number($(obj).parent().parent().children().eq(3).html());//取总价格
        $(obj).parent().parent().children().eq(4).html(price);//给总计那列赋值
        $(obj).prev().html(num);
        zPrice();//调用总价钱的函数
    }

</script>
</html>
